// ========================================
// 全局样式混入（Mixins）
// ========================================

@import './variables.scss';

// 文字溢出省略
@mixin ellipsis($line: 1) {
	@if $line == 1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	} @else {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: $line;
		overflow: hidden;
		word-break: break-all;
	}
}

// Flex居中
@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

// Flex between
@mixin flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

// 卡片样式
@mixin card {
	background: $bg-card;
	border-radius: $radius-md;
	box-shadow: $shadow-sm;
	transition: all $transition-base;

	&:active {
		background: $bg-hover;
		transform: scale(0.98);
	}
}

// 渐变背景
@mixin gradient-bg($deg: 135deg, $color1: #667EEA, $color2: #764BA2) {
	background: linear-gradient($deg, $color1 0%, $color2 100%);
}

// 毛玻璃效果
@mixin glass {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

// 骨架屏动画
@mixin skeleton-animation {
	animation: skeleton-loading 1.5s ease-in-out infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
}

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

// 脉冲动画
@mixin pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

// 渐入动画
@mixin fade-in {
	animation: fadeIn $transition-base ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

// 滑入动画
@mixin slide-up {
	animation: slideUp $transition-base ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(20rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

